<template>
  <view class="ver-layout">
    <block v-if="teachGoalList.length>0">
      <view v-for="(item,index) in teachGoalList" :key="index" class="teacher-item ver-layout"
            :class="{'top':index===0}"
            @click="toGoalDetail(item)">
        <view class="teacher-content hor-layout-center">
          <image class="teacher-icon" :src="item.teacher_avatar"/>
          <view class="teacher-info ver-layout">
            <view class="name">{{ item.teacher_name }}</view>
            <view class="time">{{ item.created_at }}</view>
          </view>
          <view class="look-btn">查看</view>
        </view>
        <view class="teacher-bottom hor-layout-side">
          <view>{{ item.courses_title || item.majors }}</view>
          <view>{{ getLessonFlag }}{{ item.class_period_totalnum || item.sections_count }}课时</view>
        </view>
      </view>
      <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
    </block>
    <view v-else class="list-no-data">暂无数据</view>
  </view>
</template>

<script>
import {recordStudentTeachGoalDetail, recordStudentCommentDetail} from "@/router.js"
import {StudentTeachGoalApi} from "@/api/recordStudy.js"

let engine = new StudentTeachGoalApi()
export default {
  name: "teachGoal",
  data() {
    return {
      studentObj: {},
      teachGoalList: [{}],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  computed: {
    getLessonFlag() {
      return this.studentObj.title === '教学目标' ? '总计' : '剩余'
    }
  },
  onLoad(options) {
    this.studentObj = options
    uni.setNavigationBarTitle({title: options.title})
    // this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    getCommentList() {
      let sid = this.studentObj.student_id,
          page = this.loadingObj.current
      engine.getCommentList({sid, page}).then(res => {
        this.teachGoalList = this.teachGoalList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    getTeachGoalList() {
      let sid = this.studentObj.student_id,
          page = this.loadingObj.current
      engine.getTeachGoalList({sid, page}).then(res => {
        this.teachGoalList = this.teachGoalList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    toGoalDetail(item) {
      if (this.studentObj.title === '教学目标')
        this.$u.route({url: recordStudentTeachGoalDetail, params: item})
      if (this.studentObj.title === '学生评价') {
        item.comment_id = item.id
        this.$u.route({url: recordStudentCommentDetail, params: item})
      }
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.teachGoalList = []
      if (this.studentObj.title === '教学目标')
        this.getTeachGoalList()
      if (this.studentObj.title === '学生评价')
        this.getCommentList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        if (this.studentObj.title === '教学目标')
          this.getTeachGoalList()
        if (this.studentObj.title === '学生评价')
          this.getCommentList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.teachGoalList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.teacher-item {
  margin: auto;
  margin-bottom: 18px;
  padding: 0px 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 6px;
}

.teacher-item.top {
  margin-top: 18px;
}

.teacher-content {
  margin-top: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.teacher-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.teacher-info {
  flex: 1;
  margin-left: 12px;
}

.teacher-info > .name {
  font-size: 14px;
  line-height: 14px;
  color: #000000;
}

.teacher-info > .time {
  margin-top: 12px;
  font-size: 12px;
  line-height: 12px;
  color: #999999;
}

.teacher-content > .look-btn {
  padding: 9px 17px;
  border: 1px solid #FF873E;
  border-radius: 3px;
  /* 文本样式 */
  font-size: 14px;
  line-height: 14px;
  color: #FF873E;
}

.teacher-bottom {
  margin-top: 12px;
  margin-bottom: 18px;
}
</style>
